<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 数组是一个可以同时存储多个值的有序集合
    // const arr = [1,2,3,4];
    // const arr2 = ["zhangsan", "lisi", true, function() {}];

    // 数组都有length属性，表示数组的长度(数组有几项)
    // arr2.length;
    // 也可以通过中括号和索引来获取个别项
    // arr2[2]





    // 数组的创建
    // 1. 字面量的创建
    // const arr3 = [1, 2, 3, 4];
    // 2. 创造函数的创建
    // const arr4 = new Array("a", "b", "c", "d");






    // 数组的其他方法(目前要熟悉所有的方法,快毕业的时候全部背出来)
    // 除了功能，还必须知道是否改变原数组，是否有返回值

    // 1. push(...items)
    // 在数组的最后新增一项或多项
    // 会改变原数组，返回的是改变后的新数组的长度
    const numbers = [1,2,3];
    const result = numbers.push(4, 5);
    console.log("pushResult:" + result);
    console.log(numbers); // [1,2,3,4,5]


    
    // 2. pop()
    // 删除的是最后一项
    // 会改变原数组， 返回值是被删掉的那个最后一项
    const popResult = numbers.pop();
    console.log("popResult:" + popResult);
    console.log(numbers); // [1,2,3,4]
    


    // 3. shift()
    // 删除的是第一项
    // 会改变原数组， 返回值是被删掉的那个第一项
    const shiftResult = numbers.shift();
    console.log("shiftResult:" + shiftResult);
    console.log(numbers); // [2,3,4]



    // 4. unshift(...items)
    // 在数组的前面新增一项或多项
    // 会改变原数组，返回值是改变后的新数组长度
    const unshiftResult = numbers.unshift(0);
    console.log("unshiftResult:" + unshiftResult);
    console.log(numbers); // [0,2,3,4]



    // 5. splice(startIndex, deleteCount, ...items)
    // 可以用来删除元素，也可以添加新元素
    // 会改变原数组, 返回值是被删除的所有的项组成的数组
    const spliceResult = numbers.splice(2, 1, "a", "b");
    console.log("spliceResult:" + spliceResult);
    console.log(numbers); // [0,2,"a","b",4]



    // 6. indexOf(searchElement, fromIndex?)
    // 用于搜索数组里面的第一个元素项,(也可以用来判断数组里面是否有某一个元素)
    // indexOf是不会改变原数组
    // 如果能找到就返回这个元素所在的索引位置
    // 不能找到，返回-1
    const indexOfResult = numbers.indexOf(2, 2);
    console.log("indexOfResult:" + indexOfResult);
    console.log(numbers); // [0,2,"a","b",4]




    // 7. lastIndexOf(searchElement, fromIndex?)
    // 从后往前搜索数组里面的第一个匹配元素项
    // indexOf是不会改变原数组
    const lastIndexOfResult = numbers.lastIndexOf(2, 2)
    console.log("lastIndexOfResult:" + lastIndexOfResult);
    console.log(numbers); // [0,2,"a","b",4]



    // 8. join(separator?)
    // 用来将数组转成字符串的,separator默认值是","
    // join是不会改变原数组
    // 返回的是整理好的字符串
    // const joinResult = numbers.join("-");
    const joinResult = numbers.join("");
    console.log("joinResult:" + joinResult);
    console.log(numbers); // [0,2,"a","b",4]




    // 9. slice(startIndex?, endIndex?)
    // 用来做数组截取的, 不传参是全部取出来
    // slice是不会改变原数组
    // 返回值是截取出来的那几项组成的数组
    const sliceResult = numbers.slice();  // [1, 3)
    console.log("sliceResult:" + sliceResult);
    console.log(numbers);




    // 10. reverse()
    // 用来做数组反转的
    // reverse是会改变原数组的
    // 返回值也是反转后的数组
    const reverseResult = numbers.reverse();
    console.log("reverseResult:" + reverseResult);
    console.log(numbers);




    // 11. sort(fn?)
    // 用于做数组排序,不传参是从小到大
    // 要穿函数
    // 会改变原数组
    // 返回值就是排序完以后的数组
    const arr = [3,4,7,1,2,9,0];
    const sortResult = arr.sort((a, b) => {
      // a - b 表示从小到大
      // b - a 表示从大到小
      return a - b;
    });
    console.log("sortResult:" + sortResult);
    console.log(arr);

    // 对象数组的排序
    const arr2 = [
      {
        name: "zhangsan",
        age: 20,
      },
      {
        name: "lisi",
        age: 25,
      },
      {
        name: "wangwu",
        age: 22,
      }
    ]
    const newArr = arr2.sort((a, b) => {
      return a.age - b.age
    })
    console.log(newArr);
    




    // 12. concat()
    // 作用和push一样，用来后面做追加
    // 要追加多个值的时候，用数组
    // 不会改变原数组
    // 返回值是追加完的新数组
    // const concatResult = numbers.concat(9);
    const concatResult = numbers.concat([11,22]);
    console.log("concatResult:" + concatResult);
    console.log(numbers);





    // 13. flat()
    // 做数组扁平化
    // 不会改变原数组
    // 返回值是扁平完以后的数组
    // 默认只会扁平一层
    // 可以加上参数Infinity，扁平化所有层
    const flatArr = [[1,2],[3,4,5]];
    const newFlatArr = flatArr.flat(Infinity);
    console.log(newFlatArr);
    console.log(flatArr);
    

    
    
    
    




    
    
    
    

  </script>
</body>
</html>